<template>
    <div class="audio_res">
      
        <el-row>
            <el-col :span="4" :offset="0">
              <el-upload action='http://upload.qiniu.com/'
                    :show-file-list='showUploadList'
                    :on-progress="handleProgress"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :before-upload="beforeUpload"
                    :data='form'>
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-col>
            <el-col :span="6" :offset="10">
                <el-button type="primary"  @click="_getRes()" :loading="loading">刷新音频资源数据</el-button>
             </el-col>
             <el-col :span="4" :offset="0">
                <el-button type="primary"  @click="_getQiniuToken()" :loading="loading">刷新token</el-button>
             </el-col>
        </el-row>
        <div class="divline"></div>

   
    <b>选择文件</b>：{{ fileName }}<br/>
    <b>上传进度</b>：{{ loaded }} MB / {{ fileSize }} MB, {{ percent }}%<br/>
    <b>上传结果</b>：{{ result }}<br/>

 <div class="divline"></div>

      <el-table :data="tableData" border style="width: 100%" align='center'>
            <el-table-column v-for="filed in fields"
                :prop="filed.info.prop"
                :label="filed.info.label"
                :sortable="filed.info.sortable"
                :align="filed.style.align"
                :width="filed.style.width">
            </el-table-column>
            <el-table-column 
                :prop="size.info.prop"
                :label="size.info.label"
                :sortable="size.info.sortable"
                :align="size.style.align"
                :formatter="formatterSize"
                :width="size.style.width">
            </el-table-column>
            <el-table-column 
                :prop="time.info.prop"
                :label="time.info.label"
                :sortable="time.info.sortable"
                :align="time.style.align"
                :formatter="formatterTime"
                :width="time.style.width">
            </el-table-column>
            <el-table-column 
                :prop="remark.info.prop"
                :label="remark.info.label"
                :sortable="remark.info.sortable"
                :align="remark.style.align"
                :formatter="formatterRemark"
                :width="remark.style.width">
            </el-table-column>
            
             <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                 <el-tooltip content="编辑资源" placement="left">
                        <el-button type="info" icon='edit' size="mini" @click='onEidt(scope.row)'></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除资源" placement="right">
                        <el-button type="danger" icon='delete' size="mini" @click='onDelete(scope.row,scope.$index)'></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>  
        </el-table>

         <div class="block">
            <el-pagination
            style="margin-top:10px;"
            align="center"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="tableCount"
            :layout="layout"
            :total="tableTotal">
            </el-pagination>
        </div>

        <el-dialog title="" v-model="updateFormVisible">
            <el-form :model="resForm" ref="resForm" style="width: 80%" label-width="30%">
                
                 <el-form-item prop="url" label="url" :rules="[{required: false, message: '请输入url', trigger: 'blur'}]">
                    <el-input placeholder="请输入题干" v-model="resForm.url" type="textarea" :rows="1" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="名称" :rules="[{required: false, message: '请输入题干', trigger: 'blur'}]">
                    <el-input placeholder="请输入资源名称" v-model="resForm.name" type="textarea" :rows="1"></el-input>
                </el-form-item>
                <el-form-item prop="remark" label="备注" :rules="[{required: false}]">
                    <el-input placeholder="请输入备注" v-model="resForm.remark" type="textarea" :rows="1"></el-input>
                </el-form-item>

                
                <el-form-item>
                    <el-button type="primary" @click="submitForm('resForm')">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import AudioResJs from './AudioRes.js';
module.exports = AudioResJs;
</script>

<style>
</style>
